<!--
    @ author:小恶魔
    @ datetime: 2020-7-26
 -->
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>地址信息</title>

    <link rel="stylesheet" href="/static/logistics/css/bootstrap4.5.css">
    <link rel="stylesheet" href="/static/admin/lib/font-awesome-4.7.0/css/font-awesome.css">
    <link rel="stylesheet" href="/static/logistics/css/city-picker.css">
    <style>
        .checkbox-custom {
            position: relative;
            padding: 0 15px 0 25px;
            margin-bottom: 7px;
            margin-top: 0;
            display: inline-block;
        }
        /*
        将初始的checkbox的样式改变
        */
        .checkbox-custom input[type="checkbox"] {
            opacity: 0;/*将初始的checkbox隐藏起来*/
            position: absolute;
            cursor: pointer;
            z-index: 2;
            margin: -6px 0 0 0;
            top: 50%;
            left: 3px;
        }
        /*
        设计新的checkbox，位置
        */
        .checkbox-custom label:before {
            content: '';
            position: absolute;
            top: 50%;
            left: 0;
            margin-top: -9px;
            width: 19px;
            height: 18px;
            display: inline-block;
            border-radius: 2px;
            border: 1px solid #bbb;
            background: #fff;
        }
        /*
        点击初始的checkbox，将新的checkbox关联起来
        */
        .checkbox-custom input[type="checkbox"]:checked +label:after {
            position: absolute;
            display: inline-block;
            font-family: 'Glyphicons Halflings';
            content: "✔";
            top: 42%;
            left: 3px;
            margin-top: -5px;
            font-size: 11px;
            line-height: 1;
            width: 16px;
            height: 16px;
            color: #333;
        }
        .checkbox-custom label {
            cursor: pointer;
            line-height: 1.2;
            font-weight: normal;/*改变了rememberme的字体*/
            margin-bottom: 0;
            text-align: left;
        }
    </style>
</head>
<body>
<!-- 头部文件 -->
<div th:replace="~{/logistics/header::html}"></div>
<div class="bg-light">
    <div class="container">
        <div class="row">
            <!-- 面包屑导航 -->
            <div th:replace="~{/logistics/navigation::html}"></div>

            <div class="col-sm-12 p-3 rounded" style="background-color: white;">

                <div class="row p-2">
                    <!-- 左边信息导航栏 -->
                    <div class="text-center" th:replace="~{/logistics/leftMess::html}"></div>

                    <div class="col-sm-10">

                        <div class="row">
                            <div class="col-sm-12">

                                <button type="button" class="btn btn-warning btn-lg" data-toggle="modal" data-target="#staticBackdrop">
                                    新增地址
                                </button>
                            </div>

                            <div class="col-sm-12 mt-3">

                                <table class="table">
                                    <thead>
                                    <tr>
                                        <th scope="col">姓名</th>
                                        <th scope="col">手机</th>
                                        <th scope="col">详细地址</th>
                                        <th scope="col">操作</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr>
                                        <th scope="row">1</th>
                                        <td>Mark</td>
                                        <td>Otto</td>
                                        <td>@mdo</td>
                                    </tr>
                                    </tbody>
                                </table>
                                <!-- 分页 -->
                                <nav aria-label="Page navigation example">
                                    <ul class="pagination">
                                        <li class="page-item">
                                            <a class="page-link" href="#" aria-label="Previous">
                                                <span class="text-warning" aria-hidden="true">&laquo;</span>
                                            </a>
                                        </li>
                                        <li class="page-item "><a class="page-link text-warning" href="#">1</a></li>
                                        <li class="page-item ">
                                            <a class="page-link" href="#" aria-label="Next">
                                                <span class="text-warning" aria-hidden="true">&raquo;</span>
                                            </a>
                                        </li>
                                    </ul>
                                </nav>
                            </div>
                        </div>



                    </div>

                </div>

            </div>
        </div>
    </div>
</div>

<!-- 新增地址簿的模态框 -->
<div class="modal fade" id="staticBackdrop" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="staticBackdropLabel">新增地址簿</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-sm-12">

                        <form>
                            <div class="form-group row">
                                <label for="name" class="col-sm-3 col-form-label">姓名</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" id="name">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="phone" class="col-sm-3 col-form-label">联系方式</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" id="phone">
                                </div>
                            </div>

                            <div class="form-group row">
                                <label for="city-picker3" class="col-sm-3 col-form-label">所在地区</label>
                                <div class="col-sm-9">

                                    <div class="docs-methods">
                                        <div id="distpicker">
                                            <div style="position: relative;">
                                                <input id="city-picker3" class="form-control" readonly type="text"
                                                       value="湖南省/长沙市/雨花区" data-toggle="city-picker">
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>

                            <div class="form-group row">
                                <label for="address" class="col-sm-3 col-form-label">详细地址</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" id="address">
                                </div>
                            </div>

                            <div class="form-group row">
                                <label class="col-sm-3 col-form-label"></label>
                                <div class="col-sm-9">

                                    <div class="checkbox-custom checkbox-default mt-2">
                                        <input type="checkbox" id="readId">
                                        <label for="readId">设为默认地址</label>
                                    </div>

                                </div>
                            </div>

                        </form>

                    </div>
                </div>


            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-warning">确认</button>
            </div>
        </div>
    </div>
</div>

<div th:replace="~{/logistics/footer::html}"></div>
<script src="/static/logistics/js/jquery-2.2.4.js"></script>
<script src="/static/logistics/gijgo-combined-1.9.13/js/gijgo.min.js" type="text/javascript"></script>
<script src="/static/logistics/js/city-picker.data.js"></script>
<script src="/static/logistics/js/city-picker.js"></script>

<script src="/static/logistics/js/bootstrap4.5.js"></script>

</body>
</html>
